<template>
<div class="container">
    <div class="main">
        <!-- 整个注册盒子 -->
<div class="loginbox">
          <!-- 左侧的注册盒子 -->
          <div class="loginbox-in">
              <el-form :rules= "rules" ref="loginform" :model= "loginform" class="loginContainer" @keyup.enter.native= "login">
                <div class="u-p">
                <div class="userbox">
                <el-form-item prop="IdNumber">
                  <span class="iconfont" style="float:left">&#xe64a;</span>
                  <el-input type="text" auto-complete="false" v-model= "loginform.IdNumber" placeholder="请输入身份证号码" style="float:right; width:170px"></el-input>
                </el-form-item>
                </div>
                <div class="pwdbox">
                <el-form-item prop="PhoneNumber">
                  <span class="iconfont" style="float:left">&#xe637;</span>
                  <el-input id="pwd" type="text" auto-complete="false" v-model= "loginform.PhoneNumber" placeholder="请输入手机号码" style="float:right; width:170px"></el-input>
                </el-form-item>
                </div>
                <div class="codebox">
                <el-form-item prop="Code">
                  <el-input type="text" auto-complete="false" v-model= "loginform.Code" placeholder="手机验证码" style="float:left; width:120px"></el-input>
                  <button  class="code_btn" @click= "get_code" >
                    <span v-show= "show" >获取</span>
                    <span v-show= "!show" class="count">{{count}} s</span>
                  </button>
                </el-form-item>
                </div>
                </div>
                </el-form>
                  <button type="primary" id="back" class="back_btn" @click= "back">返回</button>
                  <el-button type="primary" class="login_btn" @click= "login">确认</el-button>
            </div>
            <!-- 右侧的注册盒子 -->
         <div class="background">
            <div class="title">欢迎注册稽查系统</div>
        </div>
</div>
</div>
</div>
</template>

<script>
export default {
  name : 'Register',
  data(){
    var phoneNumber = (rule, value, callback) => {
        if(value==''){
          callback(new Error('请输入手机号'))
        }else if (value && (!(/^[1][345789]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
          callback(new Error('手机号码不符合规范'))
        }
        else {
          callback()
        }
    }; 
    var idCard = (rule, value, callback) => {
        if(value==''){
          callback(new Error('请输入手机号'))
        }else if (value && (!(/\d{17}[\d|x]|\d{15}/).test(value) || (value.length !== 15 && value.length !== 18))) {
          callback(new Error('身份证号码不符合规范'))
        } else {
          callback()
        }
    };
    return{
      show: true,
      count: '',
      timer: null,
      loginform:{
        IdNumber:'',
        PhoneNumber:'',
        Code:''
      },
      rules:{
        IdNumber:[{required:true,validator: idCard,trigger:'blur'}],
        PhoneNumber:[{required:true,validator: phoneNumber,trigger:'blur'}],
        Code:[{required:true,message:'请输入验证码',trigger:'blur'}] 
      }
    }
  },
  methods:{
    get_code(){
      var value= this.loginform.PhoneNumber;
        if(value=='' || value && (!(/^[1][345789]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)){
          return;
        }else{
          const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            }
          }, 1000)
          }
        }
   },
    login() {
      this.$refs.loginform.validate((valid) => {
        if(valid) {
          alert('submit!');
        }else {
          this.$message.error('请输入所有字段!');
          return false;
        }
      });
    },
    back() {
      this.$router.push('/');
    }
  }
}
</script>


<style scoped>
.u-p >>> .el-input__inner{
    outline-style: none ;
    border: 0;
    border-bottom:1px solid #ffffff;
    background-color:transparent;
    height:20px;
     font-family:sans-serif;
    font-size:15px;
    color:#9998a3;
    font-weight:bold;
}
.u-p >>>.el-input__inner:focus{
    border-bottom:2px solid #231e55;
    background-color:transparent;
     transition: all 0.2s ease-in;
     font-family:sans-serif;
    font-size:15px;
     color:#231e55;
     font-weight:bold;
}
.u-p >>>.el-input__inner:hover{
    border-bottom:2px solid #35338d;
    background-color:transparent;
     transition: all 0.2s ease-in;
     font-family:sans-serif;
    font-size:15px;
     color:#232866;
     font-weight:bold;
     
}
.u-p >>>.el-input__inner:-webkit-autofill {
  /* 修改默认背景框的颜色 */
 box-shadow: 0 0 0px 1000px  #332d85 inset !important;
 /* 修改默认字体的颜色 */
 -webkit-text-fill-color: #40428a;
} 

.u-p >>>.el-input__inner:-webkit-autofill::first-line {
  /* 修改默认字体的大小 */
 font-size: 15px;
 /* 修改默认字体的样式 */
 font-weight:bold;
 }
.u-p >>>.el-form-item__error{
  margin-left: 50px;
}
.loginbox{
    display:flex;
    position:absolute;
    width:800px;
    height:400px;
    top:40%;
    left:50%;
    transform:translate(-50%,-50%);
    box-shadow: 0 12px 16px 0  rgba(65, 53, 168, 0.24), 0 17px 50px 0 #03020c;
}
.container{
  width: 100%;
  height: 100%;
  background-color: #324057;
}
.background{
    width:570px;
    background-image:url('../assets/bg.jpg');
    background-size:cover;
    font-family:sans-serif;
}
.title{
    width:570px;
    text-align: center;
    margin-top:320px;
    font-weight:bold;
    font-size:20px;
    color:#20217a;
    
}
.title:hover{
     font-size:21px;
     transition: all 0.4s ease-in-out;
     cursor: pointer;
}
.loginbox-in{
     background-color:#d6d6db;
     width:240px;
}
@font-face {
    font-family: "iconfont";
    src: url('./font/iconfont.eot');
    src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./font/iconfont.woff2') format('woff2'), url('./font/iconfont.woff') format('woff'), url('./font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('./font/iconfont.svg#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 20px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height:22px;
    color:#180a3d;
    margin-right:10px;
}
.icon-key:before {
    content: "\e775";
}

.icon-account:before {
    content: "\e817";
}
.userbox{
    margin-top:100px ;
    height:50px;
     width:230px;
     display: flex;
     margin-left:20px;
}
.pwdbox{ 
    height:50px;
    width:225px;
    display: flex;
    margin-left:20px;
}
.codebox{
  height:50px;
  width:225px;
  display: flex;
  margin-left:20px;
}
.code_btn{
  float:right;
  height:25px;
  width:55px;
  text-align:center;
  font-size: 12px;
  margin-left:15px;
  margin-top: 5px;
}
.login_btn{
    background-color: #3d3183; /* Green */
    border: none;
    color: #FAFAFA;
    padding: 5px 22px;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    border-radius: 20px;
    outline:none;
    float: right;
    margin-right:25px;
}
.login_btn:hover{
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    cursor: pointer;
     background-color: #29338f;
      transition: all 0.2s ease-in;
}
.back_btn{
    background-color: transparent; /* Green */
    float: left;
    border: none;
    text-decoration: none;
    font-size: 12px;
    /* border-radius: 20px;   */
     color:#23247a;
    font-size:12px;
    text-decoration:underline;
    display: flex;
    margin-left:25px;
    margin-top: 5px;
    outline:none;
    
}
.back_btn:hover{
    font-weight:bold;
    cursor: pointer;
}
</style>